<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>NeverGetMe</title>
    <link rel="shortcut" th:href="@{/icon/java.svg}"/>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.4.1.min.js"
            integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
    <script src="https://cdn.bootcss.com/echarts/4.2.1-rc1/echarts-en.common.js"></script>

    <script th:src="@{/js/echarts-wordcloud.js}"></script>
    <script th:src="@{/js/viewer.min.js}"></script>
    <link th:href="@{/css/viewer.min.css}" rel="stylesheet">
</head>
<body>
<div th:replace="header::html"></div>
<div class="container">
    <div class="card border-light" id="SearchCardShow" style="position:absolute;left: 50%;top:50%;transform: translate(-50%,-75%);width: 60%">
        <div class="card-body" >
            <div class="input-group" >
                <input type="text" class="form-control" aria-describedby="SendSearchContent" id="SearchContent">
                <div class="input-group-append">
                    <button class="btn btn-dark" type="button" id="SendSearchContent">搜索</button>
                </div>
            </div>
            <div class="container mt-3" id="articleTables" >
            </div>
            <div id="WordCloud" style="width: auto;height:300px;"></div>
        </div>
    </div>
</div>
<div th:replace="footer::html"></div>
<script th:src="@{/myjs/header.js}"></script>
<script th:src="@{/myjs/articleList.js}"></script>
<!--<script th:inline="javascript">-->
<!--    var userID=[[${userId}]];-->
<!--</script>-->
<script>
    readUserInfo();
    var chart=echarts.init(document.getElementById('WordCloud'));
    function createRandomItemStyle() {
        return {
            normal: {
                color: 'rgb(' + [
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160),
                    Math.round(Math.random() * 160)
                ].join(',') + ')'
            }
        };
    }
    function generateRequireData(data) {
        var chartData=[];
        for(var i in data){
            chartData.push({name:data[i].content,value:data[i].times,textStyle: createRandomItemStyle()});
        }
        return chartData;
    }



    function loadWordCloudChart(data,chart){
        var option = {
            tooltip: {
                show: true
            },
            series: [{
                name: 'Search Trends',
                type: 'wordCloud',
                size: ['80%', '80%'],
                shape: 'circle',
                drawOutOfBound: false,
                textRotation : [0, 45, 90, -45],
                textPadding: 0,
                autoSize: {
                    enable: true,
                    minSize: 14
                },
                data:generateRequireData(data)
            }]
        };
        chart.setOption(option);
    }

    function setSearchShowList(status){
        if(status){
            $("#SearchCardShow").css("position","absolute");
            $("#SearchCardShow").css("left","50%");
            $("#SearchCardShow").css("transform","translate(-50%,-75%)");
            $("#SearchCardShow").css("top","50%");
            $("#SearchCardShow").css("width","60%");
        }else{
            $("#SearchCardShow").css("position","");
            $("#SearchCardShow").css("left","");
            $("#SearchCardShow").css("transform","");
            $("#SearchCardShow").css("top","");
            $("#SearchCardShow").css("width","");
        }
    }
    var myStatus=true;
    $(document).ready(function () {
        updateFooter(1);
        chart.on('click',function (params) {
            console.log(params.name);
            $("#SearchContent").val(params.name);
        })
        $.get("/article/getSearchHistory",function (data,status) {
           if(data){
               // console.log(data);
               loadWordCloudChart(data,chart);
           }

        });
        $("#SendSearchContent").click(function () {
            if($("#SearchContent").val()){
                $.post("/article/searchArticle",{
                    contents:$("#SearchContent").val()
                },function (data,status) {
                    if(data){
                        //console.log(data);
                        setSearchShowList(false);
                        updateArticleList(data);
                        updateFooter(data.length);
                        $(function () {
                            $("#articleTables img").click(function () {
                                showImage($(this)[0].src)
                            })
                        });
                        $("#WordCloud").hide();
                    }
                });
            }
        });
    });


</script>
</body>
</html>